import { ElLoading } from 'element-plus'
import type { LoadingOptions } from 'element-plus'

let loadingInstance: any = null

/**
 * 显示全屏Loading
 */
export const showFullscreenLoading = (options: LoadingOptions = {}) => {
  const defaultOptions: LoadingOptions = {
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.9)',
    customClass: 'element-loading-fullscreen'
  }
  
  loadingInstance = ElLoading.service({
    ...defaultOptions,
    ...options
  })
  
  return loadingInstance
}

/**
 * 显示遮罩层Loading
 */
export const showOverlayLoading = (options: LoadingOptions = {}) => {
  const defaultOptions: LoadingOptions = {
    lock: false,
    text: '处理中...',
    background: 'rgba(255, 255, 255, 0.8)',
    customClass: 'element-loading-overlay'
  }
  
  loadingInstance = ElLoading.service({
    ...defaultOptions,
    ...options
  })
  
  return loadingInstance
}

/**
 * 隐藏Loading
 */
export const hideLoading = () => {
  if (loadingInstance) {
    loadingInstance.close()
    loadingInstance = null
  }
}

/**
 * 显示按钮Loading
 */
export const showButtonLoading = (el: HTMLElement, text: string = '加载中...') => {
  const loadingInstance = ElLoading.service({
    target: el,
    text,
    background: 'rgba(255, 255, 255, 0.8)',
    customClass: 'element-loading-button'
  })
  
  return loadingInstance
}

/**
 * 显示进度Loading
 */
export const showProgressLoading = (options: LoadingOptions & { progress?: number } = {}) => {
  const defaultOptions: LoadingOptions = {
    lock: true,
    text: '上传中...',
    background: 'rgba(255, 255, 255, 0.9)',
    customClass: 'element-loading-progress'
  }
  
  loadingInstance = ElLoading.service({
    ...defaultOptions,
    ...options
  })
  
  return loadingInstance
} 